<template>
  <div>
    <div id="main" :style="myChartStyle"></div>
    <div class="border"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import mockData from './mockData'
export default {
  name: 'LineChart',
  mounted() {
    this.initChart()
  },
  data() {
    return {
      // Option:null,
      myChartStyle: {height: '400px', width: '100%', backgroundColor: '#fff'}, //图表样式,
      mockData,
      myChart: null,
    }
  },
  methods: {
    getChartData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(mockData)
        }, 1000)
      })
    },
    async initChart() {
      var myChart = echarts.init(document.getElementById('main')) //基于准备好的dom，初始化ECharts图表
      var option = {
        //指定图表的配置项和数据
        color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
        // backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
        // title: {text: '某学院2020年专业招生情况汇总表', left: 70, top: 9},
        // tooltip: {tooltip: {show: true}},
        tooltip: {
          triggerOn: 'click',
          show: true,
          trigger: 'axis',
          position: [10, 10],
          // position: function (pt) {
          //   return [pt[0], '10%']
          // },
        },
        // legend: {data: ['2019年招生'], left: 422, top: 8},

        axisPointer: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // triggerEvent: true,
          //配置x轴坐标系
          // data: ['大数据', '云计算', 'ERP', '人工智能', '软件开发', '移动开发', '网络技术'],
        },
        yAxis: {}, //配置y轴坐标系
        series: [
          {
            //配置数据系列
            // name: '招生人数:',
            type: 'line',
            // type: 'bar',
            // barWidth: 55, //设置柱状图中每个柱子的宽度
            // data: [350, 200, 66, 210, 466, 200, 135],
          },
        ],
        dataset: {
          source: [],
        },
      }
      const res = await this.getChartData()
      option.dataset.source = res.curveData.map((item) => {
        let {date, combination, benchmark, active} = item
        return [date, combination, benchmark, active]
      })
      console.log('res', res)
      // myChart.setOption(option) //使用刚指定的配置项和数据显示图表
      //回调函数处理鼠标点击事件并跳转到相应的百度搜索页面
      // myChart.on('mousemove', function (params) {
      //   // 判断是否在画布内移动鼠标
      //   if (params.componentType === 'series') {
      //     // 显示 tooltip
      //     myChart.dispatchAction({
      //       type: 'showTip',
      //       seriesIndex: params.seriesIndex,
      //       dataIndex: params.dataIndex,
      //     })
      //   }
      // })
      // myChart.on('mouseout', function () {
      //   // 隐藏 tooltip
      //   myChart.dispatchAction({
      //     type: 'hideTip',
      //   })
      // })
      myChart.on('highlight', function (params) {
        console.log('params', params)
        // myChart.dispatchAction({
        //   type: 'showTip',
        //   seriesIndex: params.seriesIndex,
        //   dataIndex: params.dataIndex,
        // })
        // var yt = alert('鼠标单击事件,您刚才单击了:' + params.name)

        // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
      })
      // myChart.on('mouseout', function (params) {
      //   myChart.dispatchAction({
      //     type: 'hideTip',
      //     seriesIndex: params.seriesIndex,
      //     dataIndex: params.dataIndex,
      //   })
      //   // console.log('mouseout,params', params)
      //   // var yt = alert('鼠标单击事件,您刚才单击了:' + params.name)

      //   // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
      // })
      window.addEventListener('resize', function () {
        myChart.resize() //使图表自适应窗口的大小
      })
      // await getChartData()

      myChart.setOption(option) //为echarts对象加载数据
    },
    async initChart1() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      this.myChart = myChart
      // myChart.on('click', function (params) {
      //   console.log('params', params)
      //   // 判断是否在画布内移动鼠标
      //   // if (params.componentType === 'series') {
      //   //   // 显示 tooltip
      //   //   myChart.dispatchAction({
      //   //     type: 'showTip',
      //   //     seriesIndex: params.seriesIndex,
      //   //     dataIndex: params.dataIndex,
      //   //   })
      //   // }
      // })
      var option

      // let base = +new Date(1988, 9, 3)
      // let oneDay = 24 * 3600 * 1000
      // let data = [[base, Math.random() * 300]]
      // for (let i = 1; i < 20000; i++) {
      //   let now = new Date((base += oneDay))
      //   data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])])
      // }
      // console.log('data', data)
      option = {
        // tooltip: {
        //   triggerOn: 'none', // 关闭默认的mouseover调用
        //   trigger: 'axis',
        //   enterable: true,
        // },
        tooltip: {
          trigger: 'axis',
          // position: [10, 10],
          alwaysShowContent: false,
          // position: function (pt) {
          //   return [pt[0], '10%']
          // },
        },
        // title: {
        //   left: 'center',
        //   text: 'Large Ara Chart',
        // },
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: 'none',
        //     },
        //     restore: {},
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          // type: 'time',
          type: 'category',
          boundaryGap: false,
          triggerEvent: true,
          // axisLine: {
          //   // onZero: false,
          // },
          // axisLabel: {},
          // triggerEvent: false,
        },
        // yAxis: {
        //   type: 'value',
        //   boundaryGap: [0, '100%'],
        // },
        // xAxis: {
        //   type: 'category',
        //   // data: this.xData,
        //   // type:'value',
        //   boundaryGap: false,
        //   axisLine: {
        //     // onZero: false,
        //   },
        //   axisLabel: {},
        //   // triggerEvent: false,
        // },
        yAxis: {
          type: 'value',
          scale: true,
          splitLine: {
            show: false,
          },
          axisLabel: {formatter: '{value}%'},
        },
        dataset: {
          source: [],
        },
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 20,
        //   },
        //   {
        //     start: 0,
        //     end: 20,
        //   },
        // ],
        series: [
          {
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#6cb041',
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
          },
          {
            // name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {},
            // data: this.mockData.curveData,
          },
          {
            // name: 'Fake Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {},
            // data: this.mockData.curveData,
          },
        ],
      }
      const res = await this.getChartData()
      option.dataset.source = res.curveData.map((item) => {
        let {date, combination, benchmark, active} = item
        return [date, combination, benchmark, active]
      })
      console.log('option', option)

      option && myChart.setOption(option) // 绑定 mousemove 事件监听器
      myChart.on('click', function (params) {
        var yt = alert('鼠标单击事件,您刚才单击了:' + params.name)

        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
      })

      // this.getChartData().then((res) => {
      //   option.dataset.source = res.curveData.map((item) => {
      //     let {date, combination, benchmark, active} = item
      //     return [date, combination, benchmark, active]
      //   })
      //   console.log('option', option)

      //   option && myChart.setOption(option) // 绑定 mousemove 事件监听器
      // })
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/common.less';
</style>
